<template>
  <div>
    <ul class="myUl">
      <li v-for="(x,index) in dataList">
        <el-row :gutter="10" class="myMarginBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            考核类型 :
          </el-col>
          <el-col :span="6">
            <template>
              <el-select 
                v-model="x.type_id"
                :disabled="isdisabled"
                @change="changeTypeValue(index,x.type_id)"
                placeholder="请选择考核类型">
                <el-option
                  v-for="item in assessmentType"
                  :key="item.type_name"
                  :label="item.type_name"
                  :value="item.type_id"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
            </template>
          </el-col>
        </el-row>

        <!-- <el-row :gutter="10" class="myMarginBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            处理人职务 :
          </el-col>
          <el-col :span="6">
            <el-input 
              placeholder="处理人职务" 
              v-model="x.deal_role_name" 
              :disabled="isdisabled" 
              @focus="getRole('deal_role_name','deal_role_id',index)">
            </el-input>
          </el-col>
        </el-row> --> 

        <el-row :gutter="10" class="myMarginBottom_10px">
          <el-col :span="3" class="myLeftMsg">
            <span class="require myVA_M">*</span>
            选中考核标准 :
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="ongetStandardList(index,x.type_id)" :disabled="isdisabled">重置</el-button>
            <el-button v-if="x.st_list.length>1" @click="onBatchDelete(index)" :disabled="isdisabled">批量删除</el-button>
            <el-button @click="onBold(index)" :disabled="isdisabled">重点</el-button>
          </el-col>
        </el-row>
        
        <el-row :gutter="10" class="myMarginBottom_10px">
          <el-col :span="24">
            <template>
              <el-table
                border
                :data="x.st_list"
                :stripe = true
                @selection-change="handleSelectionChange"
                v-loading="loading"
                style="width: 100%">
                <el-table-column
                  label="选择"
                  type="selection"
                  width="50">
                </el-table-column>
                <el-table-column
                  label="序号"
                  type="index"
                  width="50">
                </el-table-column>
                <el-table-column
                  label="考核项目"
                  prop="subtype_name">
                </el-table-column>
                <el-table-column
                  label="考核标准代码"
                  prop="st_no"
                  width="200">
                </el-table-column>
                <el-table-column
                  label="考核内容"
                  prop="st_content">
                </el-table-column>
                <el-table-column
                  label="考核标准"
                  prop="st_info">
                </el-table-column>
                <el-table-column
                  label="适用小区类型"
                  prop="st_range"
                  width="140">
                </el-table-column>
                <el-table-column
                  label="重点"
                  width="100">
                  <template scope="scope">  
                    <el-switch
                      v-model="scope.row.is_necessary"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      active-value="1"
                      :disabled="isdisabled"
                      inactive-value="0">
                    </el-switch> 
                  </template>
                </el-table-column>
                <el-table-column
                  label="功能操作"
                  width="100">
                  <template scope="scope"> 
                    <el-button class="look" type="text warning" size="small" @click="toDelete(index,scope.$index)" :disabled="isdisabled">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-col> 
        </el-row>
        <el-button type="primary" icon="el-icon-close" class="myclose" @click="onClose(index)" title="移除" :disabled="isdisabled"></el-button>
      </li>
      <el-row :gutter="10">
        <el-col :span="6" :offset="3">
          <el-button icon="el-icon-plus" class="myadd" @click="onAdd" title="添加" :disabled="isdisabled">添加一个考核类型</el-button>
        </el-col>
      </el-row>
    </ul>

    <!-- 选择职务 start -->
    <el-dialog title="选择职务" class="myRoleDialog" :visible.sync="newRoleDialogVisible">
      <el-row :gutter="10">
        <el-col :span="20">
          <el-input placeholder="输入关键词" v-model="kw_role"></el-input>
        </el-col>
        <el-col :span="4" class="myTextAlignRight">
          <el-button type="primary" class="myBgGreen" @click="onSearchRole">查询</el-button>
        </el-col>
      </el-row>
      <div class="myPaddingTop_10px">
        <el-tree 
          key="roleDlg"
          class="myOV_y_400px"
          ref="roleDlg"
          v-loading="roleLoading"
          :data="roleDlgList"
          :props="roleDlgProps"
          node-key="role_id"
          @check-change="onChange"
          show-checkbox>
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newRoleDialogVisible = false">取 消</el-button>
        <el-button @click="handleRoleClick" type="primary" class="myBgGreen">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 选择职务 end -->

  </div>
</template>

<style scoped>
  .myUl > li{
    box-sizing: border-box;
    border:1px solid transparent;
    position: relative;
  }
  .myUl > li::after{
    content: " ";
    display: block;
    height: 1px;
    /*background: #DCDFE6;*/
    margin-top:10px; 
  }
  .myUl > li:hover{
    border:1px dashed #F56C6C;
  }
  .myUl > li:hover .myclose{
    display: block;
  }
  .mymarginTop_10px{
    margin-top: 10px;
  }
  .myclose{
    position: absolute;
    top: 0;
    right: 0;
    width:40px;
    height: 40px;
    display: none;
    background: #F56C6C;
    padding:0;
    border:none;
    color: #fff;
  }
  .myadd{
    width:100%;
  }
  .myMarginBottom_10px{
    margin-bottom: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
  }
  .myOV_y_400px{
    border:1px solid #f2f2f2;
    box-sizing: border-box;
    min-height: 200px;
    max-height: 400px;
    overflow-y: scroll; 
  } 
  .myPaddingTop_10px{
    padding-top: 10px;
  }  
</style> 
<script>
  import { getRoleList } from '@/api/role';
  import { getStandardList } from '@/api/quality';
  export default{
    data(){
      return { 
        assessmentType:[],
        dataList:[], 
        loading:false,
        switchValue:"启用",

        kw_role:"",
        newRoleDialogVisible:false,
        roleDlgList:[],
        roleLoading:false,
        roleIdList:"",
        roleNameList:"",
        roleDlgProps: {
          children: 'children',
          label: 'role_name'
        },
        x:"",
        that:"",
        thatID:"",
        checkList:[], 
        i:0
      }   
    },
    props: ['supervisionData','supervisionTypeData','isdisabled'],
    components: {
    },
    watch: {
      dataList(val){
        this.$emit("getChildData",this.dataList);//发射数据
      }
    },
    created(){
      let vm=this;
      vm.dataList=vm.supervisionData;
      vm.assessmentType=vm.supervisionTypeData;  
      vm.disabledMenu();
    },
    methods:{
      onClose(index){
        this.dataList.splice(index,1);
        this.disabledMenu();
      }, 
      onAdd(){
        let vm=this,flag=false,defultType="";
        for(let i=0; i<vm.assessmentType.length; i++){
          if(!vm.assessmentType[i].disabled){
            flag=true;
            defultType=vm.assessmentType[i].type_id;
            break;
          }
        }    
        if(flag){
          vm.dataList.push(
            {
              type_id:defultType,
              deal_role_id:"",
              deal_role_name:"", 
              st_list:[]
            }
          )
          vm.disabledMenu(); 
          vm.ongetStandardList(vm.dataList.length-1,defultType);
        }else{
          vm.$message.info("添加失败，没有可用的考核类型！");
        }
      },
      onGetRoleList(){//拉取角色职务
        let vm = this;
        vm.roleLoading = true;
        let params = {
          kw: vm.kw_role,
          page_num: 1,
          page_size: 10000
        }; 
        getRoleList(params).then(response => {
          let res = response.data;
          vm.roleDlgList = res.rows;
          vm.roleLoading = false;
        }).catch(error => {
          vm.roleLoading = false;
        })
      },
      onSearchRole(){//职务搜索
        this.onGetRoleList();
      },
      getRole(that,thatID,x){//职务框获得焦点时
        let vm=this; 
        vm.x=x;
        vm.that=that;
        vm.thatID=thatID;
        vm.onGetRoleList();
        vm.newRoleDialogVisible=true; 
      },
      handleRoleClick(){//职务确认
        let vm=this; 
        let ids="",names="";
        let role = vm.$refs.roleDlg.getCheckedNodes(); 

        if(role.length>0){
          for (var i = 0; i < role.length ; i++) {
            ids+=role[i].role_id+",";
            names+=role[i].role_name+",";
          }
          vm.dataList[vm.x][vm.thatID]=ids.substring(0,ids.length-1);
          vm.dataList[vm.x][vm.that]=names.substring(0,names.length-1);

        }else{
          vm.dataList[vm.x][vm.thatID]="";
          vm.dataList[vm.x][vm.that]="";
        } 
        vm.newRoleDialogVisible=false;
      },
      onChange(a,b,c){
        let vm=this;
        vm.i++;
        if(vm.i%2==0){
          if(b){
            vm.$refs.roleDlg.setCheckedKeys([]);
            vm.$refs.roleDlg.setCheckedKeys([a.role_id]);
          }else{
            vm.$refs.roleDlg.setCheckedKeys([]);
          }
        }
      },
      toDelete(index,scopeindex){
        let vm=this;
        vm.$confirm('您确定要删除这条数据吗？', '提示', { 
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          vm.dataList[index].st_list.splice(scopeindex,1);
          vm.$message.success("执行成功！");
        }).catch(() => {
          vm.$message({
            type: 'info',
            message: '已取消执行'
          });          
        });
      },
      onBatchDelete(index){//批量删除 
        let vm=this;
        vm.$confirm('您确定要删除这些数据吗？', '提示', { 
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          vm.array_diff(vm.dataList[index].st_list,vm.checkList);
          vm.checkList=[];
          vm.$message.success("执行成功！");
        }).catch(() => {
          vm.$message({
            type: 'info',
            message: '已取消执行'
          });          
        });
      },
      onBold(index){//重点
        let vm=this;
        let a=vm.dataList[index].st_list;
        let b=vm.checkList;
        for(let i=0;i<b.length;i++){  
          for(let j=0;j<a.length;j++){  
            if(a[j]==b[i]){  
              a[j].is_necessary=b[i].is_necessary=='0'?'1':'0';
            }
          }
        }
      },
      array_diff(a, b) {//去除数组重复项  
        for(let i=0;i<b.length;i++){  
          for(let j=0;j<a.length;j++){  
            if(a[j]==b[i]){  
              a.splice(j,1);  
              j=j-1;  
            }  
          }  
        }   
        return a;  
      },
      handleSelectionChange(val){
        let vm=this;
        vm.checkList=val;
      },
      changeTypeValue(index,typeid){  
        this.disabledMenu();
        this.ongetStandardList(index,typeid);
      },
      disabledMenu(){//禁用选中的菜单项
        let vm=this;
        for(let i=0; i<vm.assessmentType.length; i++){
          for(let j=0; j<vm.dataList.length; j++){
            if(vm.dataList[j].type_id==vm.assessmentType[i].type_id){
              vm.assessmentType[i].disabled=true; 
              break;
            }else{
              vm.assessmentType[i].disabled=false; 
            }
          }
        }
      },
      ongetStandardList(index,typeid){
        let vm=this;
        let params={
          type_id:typeid, 
          page_num:1,
          page_size:10000
        }
        getStandardList(params).then(response => {
          let res=response.data;
          vm.dataList[index].st_list=res.rows; 
          for(let i=0; i<vm.dataList[index].st_list.length; i++){
            vm.$set(vm.dataList[index].st_list[i],'is_necessary',"1");
          } 
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },

    }
  }

</script>



